import React, { useState } from 'react'
import Fuyong from '../imageConfuyong'
import './login.css'
const TabButton: React.FC<{ active: boolean; onClick: () => void; children: React.ReactNode }> = ({ active, onClick, children }) => (
    <button
        onClick={onClick}
        style={{
            padding: '10px 20px',
            cursor: 'pointer',
            backgroundColor: active ? '#007bff' : '#f0f0f0',
            color: active ? '#fff' : '#333',
            border: 'none',
            borderRadius: '4px',
            margin: '0 5px',
        }}
    >
        {children}
    </button>
);
const Index: React.FC = () => {


    const [activeTab, setActiveTab] = useState<number>(0);
    return (
        <div className='Img-box'>
            <div className="Img-Nav">
                <div style={{ width: '100%', marginBottom: '10px' }}>
                    <TabButton active={activeTab === 0} onClick={() => setActiveTab(0)}>组合字体</TabButton>
                    <TabButton active={activeTab === 1} onClick={() => setActiveTab(1)}>宋体</TabButton>
                    <TabButton active={activeTab === 2} onClick={() => setActiveTab(2)}>黑体</TabButton>
                    <TabButton active={activeTab === 3} onClick={() => setActiveTab(3)}>楷体</TabButton>
                    <TabButton active={activeTab === 4} onClick={() => setActiveTab(4)}>圆体</TabButton>
                    <TabButton active={activeTab === 5} onClick={() => setActiveTab(5)}>书法</TabButton>
                    <TabButton active={activeTab === 6} onClick={() => setActiveTab(6)}>仿宋</TabButton>
                    <TabButton active={activeTab === 7} onClick={() => setActiveTab(7)}>创意字体</TabButton>
                </div>
                <div className='Img-tabmain'>
                    {activeTab === 0 && <div><img src="https://pub-cdn-oss.chuangkit.com/materials/2023/07/21/273ca8c3-9472-4289-9266-61c347844607_thumb?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" /></div>}
                    {activeTab === 1 && <div><img src="https://pub-cdn-oss.chuangkit.com/materials/2024/06/12/f7b7ab31-f837-4adf-bfe2-d0ce1f094205_thumb?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" /></div>}
                    {activeTab === 2 && <div><img src="https://pub-cdn-oss.chuangkit.com/materials/2023/04/14/ae5c41df-2fa2-4a32-82ba-efd1a03d8398_thumb?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" /></div>}
                    {activeTab === 3 && <div><img src="https://pub-cdn-oss.chuangkit.com/materials/2023/04/14/7632157c-85c0-4266-8f64-c543919a2191_thumb?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" /></div>}
                    {activeTab === 4 && <div><img src="https://pub-cdn-oss.chuangkit.com/materials/2024/01/30/03e0c154-397c-409d-af22-92db3d6e0889_thumb?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" /></div>}
                    {activeTab === 5 && <div><img src="https://pub-cdn-oss.chuangkit.com/materials/2023/04/18/274bff6f-53e4-4e83-866d-a1c65f837109_thumb?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" /></div>}
                    {activeTab === 6 && <div><img src="https://pub-cdn-oss.chuangkit.com/materials/2023/01/10/921cbdf6-997a-4089-a641-e3955a1653ca_thumb?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" /></div>}
                    {activeTab === 7 && <div><img src="https://pub-cdn-oss.chuangkit.com/materials/2023/08/22/cbcee563-f317-483c-a241-0468921a6f49_thumb?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" /></div>}
                </div>
            </div>
            <div className="main">
                <div>
                    <button className='geng'>更多字体</button>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
            </div>
        </div>
    );
}

export default Index